<template>
  <div class="pack-header">
    <ares-header :title="title">
      <div v-if="showBack" slot="left" @click="goBack" class="pack-header-left">
        <i class="aresic-back"></i>
        <span v-if="showBackText">{{leftText}}</span>
      </div>
      <div v-if="showRight" slot="right" class="pack-header-right">
        <span v-if="showRightText">{{ rightText }}</span>
        <i v-if="showFirstIcon" :class="rightIconFirst" @click="clickFirstIcon"></i>
        <i v-if="showSecondIcon" :class="rightIconSecond" @click="clickSecondIcon"></i>
      </div>
    </ares-header>
  </div>
</template>

<script>
export default {
  name: 'PackHeader',
  props: {
    title: String,
    leftText: String,
    hasBack: {
      type: Boolean,
      default: true,
    },
    rightIconFirst: String,
    rightIconSecond: String,
    rightText: String,
  },
  data() {
    return {};
  },
  computed: {
    showRightText() {
      return !!this.rightText;
    },
    showFirstIcon() {
      return !!this.rightIconFirst;
    },
    showSecondIcon() {
      return !!this.rightIconSecond;
    },
    showBackText() {
      return !!this.leftText;
    },
    showBack() {
      return !!this.hasBack;
    },
    showRight() {
      return this.showFirstIcon || this.rightIconSecond || this.showRightText;
    },
  },
  methods: {
    goBack() {
      this.$emit('back');
    },
    clickFirstIcon() {
      this.$emit('clickFirstIcon');
    },
    clickSecondIcon() {
      this.$emit('clickSecondIcon');
    },
  },
};
</script>
